<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layouts/layout">
<head>
<title>Cart</title>

</head>
<body>

	<th:block layout:fragment="content">
	<div class="container-wrapper">
    <div class="container">
        <div class="page-header">
            <h1>Register Customer</h1>

            <p class="lead">Please fill in your information below:</p>
        </div>

        <form th:action="@{/register}" th:object="${customer}" method="post" >

        <h3>Basic Info:</h3>

        <div class="form-group">
            <label for="customerName">Name</label>
            <input type="text" th:field="*{customerName}" class="form-control" />
			<p th:if="${#fields.hasErrors('customerName')}" th:each="err : ${#fields.errors('customerName')}" th:errors="*{customerName}"  th:errorclass="fieldError"  th:text="${err}"></p>
            
        </div>

        <div class="form-group">
            <label for="customerEmail">Email</label>
            <span th:if="${emailMsg != null}" style="color: #ff0000"></span>
             <input type="text" th:field="*{customerEmail}" class="form-control" />
			<p th:if="${#fields.hasErrors('customerEmail')}" th:each="err : ${#fields.errors('customerEmail')}" th:errors="*{customerEmail}"  th:errorclass="fieldError"  th:text="${err}"></p>
            
        </div>

        <div class="form-group">
            <label for="customerPhone">Phone</label>
            <input name="customerPhone" id="phone" class="form-control" />
        </div>

        <div class="form-group">
            <label for="username">Username</label>
            <span th:if="${usernameMsg != null}" style="color: #ff0000"></span>
             <input type="text" th:field="*{username}" class="form-control" />
			<p th:if="${#fields.hasErrors('username')}" th:each="err : ${#fields.errors('username')}" th:errors="*{username}"  th:errorclass="fieldError"  th:text="${err}"></p>
            
            
        </div>

        <div class="form-group">
            <label for="password">Password</label>
             <input type="text" th:field="*{password}" class="form-control" />
			<p th:if="${#fields.hasErrors('password')}" th:each="err : ${#fields.errors('password')}" th:errors="*{password}" th:errorclass="fieldError"  th:text="${err}"></p>
            
        </div>


        <br/>

        <h3>Billing Address:</h3>

        <div class="form-group">
            <label for="billingStreet">Street Name</label>
            <input name="billingAddress.streetName" id="billingStreet" class="form-control" />
        </div>

        <div class="form-group">
            <label for="billingApartmentNumber">Apartment Number</label>
            <input name="billingAddress.apartmentNumber" id="billingApartmentNumber" class="form-control" />
        </div>

        <div class="form-group">
            <label for="billingCity">City</label>
            <input name="billingAddress.city" id="billingCity" class="form-control" />
        </div>

        <div class="form-group">
            <label for="billingState">State</label>
            <input name="billingAddress.state" id="billingState" class="form-control" />
        </div>

        <div class="form-group">
            <label for="billingCountry">Country</label>
            <input name="billingAddress.country" id="billingCountry" class="form-control" />
        </div>

        <div class="form-group">
            <label for="billingZip">Zipcode</label>
            <input name="billingAddress.zipCode" id="billingZip" class="form-control" />
        </div>

        <br/>

        <h3>Shipping Address:</h3>

        <div class="form-group">
            <label for="shippingStreet">Street Name</label>
            <input name="shippingAddress.streetName" id="shippingStreet" class="form-control" />
        </div>

        <div class="form-group">
            <label for="shippingApartmentNumber">Apartment Number</label>
            <input name="shippingAddress.apartmentNumber" id="shippingApartmentNumber" class="form-control" />
        </div>

        <div class="form-group">
            <label for="shippingCity">City</label>
            <input name="shippingAddress.city" id="shippingCity" class="form-control" />
        </div>

        <div class="form-group">
            <label for="shippingState">State</label>
            <input name="shippingAddress.state" id="shippingState" class="form-control" />
        </div>

        <div class="form-group">
            <label for="shippingCountry">Country</label>
            <input name="shippingAddress.country" id="shippingCountry" class="form-control" />
        </div>

        <div class="form-group">
            <label for="shippingZip">Zipcode</label>
            <input name="shippingAddress.zipCode" id="shippingZip" class="form-control" />
        </div>

        <br/><br/>

        <input type="submit" value="submit" class="btn btn-default" />
        <a th:href="@{/}" class="btn btn-default">Cancel</a>

        </form>
        </div>
        </div>
	</th:block>

</body>
</html>